/**
 * Created by fangshufeng on 2017/9/20.
 */

import React from 'react';
import  ReactDOM from 'react-dom';

/**
 * 该demo展示的是组件间有共同依赖的状态的时候此时的state应该被提升到共同父组件去管理
 * */

function BoilingVerdict(props) {
    if(props.celsius >= 100) {
        return <p>水开了</p>;
    }
    return  <p>水还没开</p>;
}

/**
 * 温度输入的item
 * */

const temperatureTypeObj = {
    c: '摄氏温度',
    f: '华氏温度'
}

class TemperatureInput extends React.Component {
    render () {
        const  temperatureValue = this.props.temperatureValue;
        const  temperatureType = this.props.temperatureType;
        const  templateChange = this.props.templateChange;
        const  selfRef = this.props.selfRef;
        return (
            <fieldset>
            <legend>输入{temperatureTypeObj[temperatureType]}</legend>
            <input  ref={(e)=>{
                if (selfRef) {
                    selfRef(e);
                }
            }}
                value={temperatureValue}
                onChange={(e) => {
                    templateChange(e.target.value)
                }
                }
                />

        </fieldset>);
    }

    inputBecomeResponse = () => {
        if(this.textInput) {
            this.textInput.focus();
        }
    }
}

function toCelsius(fahrenheit) {
    return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
    return (celsius * 9 / 5) + 32;
}

function tryConvert(temperatue,func) {
    const value = parseFloat(temperatue);
    /**
     * 判断value是否是数字类型
     * */
    if (Number.isNaN(value)) {
        return '';
    }
    const output = func(temperatue);
    /**
     * 四舍五入方法
     * */
    const rounded = Math.round(output * 1000) / 1000;
   return rounded.toString();
}

export  class  Calculator extends  React.Component {
        // 构造
      constructor(props) {
        super(props);
        // 初始状态O
        this.state = {
            currentValue:'',
            temperatureType:'c'
        };
      }
    celsiusChangeHandle = (value) => {
        this.setState({
            currentValue:value,
            temperatureType:'c'
        })
    }
    fahrenheitChangeHandle = (value) => {
        this.setState({
            currentValue:value,
            temperatureType:'f'
        })
    }

    render(){
        const currentValue = this.state.currentValue;
        const temperatureType = this.state.temperatureType;
        const cValue = temperatureType === 'f' ? tryConvert(currentValue,toCelsius) : currentValue ;
        const fValue = temperatureType === 'c' ? tryConvert(currentValue,toFahrenheit) : currentValue ;
        return (
            <div>
                <TemperatureInput
                     selfRef={(e) => {
                         this.textInput = e;
                     }}
                    temperatureType={'c'}
                    temperatureValue={cValue}
                    templateChange={this.celsiusChangeHandle}/>
                <TemperatureInput
                    temperatureType={'f'}
                    temperatureValue={fValue}
                    templateChange={this.fahrenheitChangeHandle}/>
                <BoilingVerdict
                    celsius={cValue}/>
            </div>

        );
    }

    componentDidMount() {
        this.textInput.focus();
    }
}
